// 获取x按钮
let clearBtn = document.querySelectorAll('.clear')
let inputArr = document.querySelectorAll('form div input')
console.log(clearBtn,inputArr)
// 遍历事件
// 关闭按钮的功能
clearBtn.forEach(function (v, i) {
    v.onclick = function () {
        // 清除对应的input值
        inputArr[i].value = ""
        // 隐藏自己
        v.style.display = "none"

    }
})
// 关闭按钮的显示和隐藏
// input发生输入事件的时候   显示
inputArr.forEach(function (v, i) {
    v.oninput = function () {
        // 判断当前输入框的值length >= 1时，显示关闭按钮
        if (v.value.length >=1 ) {
            clearBtn[i].style.display = 'block'
        }else{
            clearBtn[i].style.display = 'none'

        }
    }
})
/*注册正则*/
let regArr = [
    /^[a-zA-Z]\w{5,11}$/,   //6-12: 字母开头,后面跟字母\数字\下划线
    /^1[3456789][0-9]{9}$/, //11  : 
    /^[a-zA-Z]\w{3}$/,      //4位验证码: 字母开头,后面跟字母\数字\下划线
    /^[a-zA-Z]\w{5,11}$/    //6-12: 字母开头,后面跟字母\数字\下划线
]

// 获取警告数组
let stopArr = document.querySelectorAll('.stop')

inputArr.forEach(function (v, i) {
    // 给input绑定失去焦点事件
    v.onblur = function () {
        // 拿到输入框的值
        console.log('输入框的值', v.value)
        // 拿到匹配的正则
        console.log('匹配的正则', regArr[i])
        // 如果正则的值为false，就显示对应的警示框内容

        if (regArr[i].test(v.value) == false) {
            stopArr[i].style.display = 'block'
        } else {
            stopArr[i].style.display = 'none'
        }
    }
})


// 获取单选框
let checkBox = document.querySelector('.kk')
//注册按钮
let regBtn = document.querySelector(".btn");
console.log(checkBox, regBtn)

checkBox.onclick = function () {
    if (this.checked) {
        //单选框选中状态
        //布尔值属性(true为启动该属性, false为禁用该属性)
        regBtn.style.backgroundColor = '#1ca8ef'
        regBtn.style.color = '#fff'
        // 灰色时禁用按钮禁止
        regBtn.disabled = false
    } else {
        regBtn.style.backgroundColor = '#999'
        regBtn.style.color = '#000'
        // 灰色时禁用按钮禁止
        regBtn.disabled = true
    }
}
//注册按钮
regBtn.onclick = function () {
    let flag = true;  //标杆：假设所有内容为true,flag就为true
    console.log('点击');
    // 再次验证（同时验证四个消息）
    inputArr.forEach(function(v,i) {
        //v每一个input
        console.log(i, regArr[i].test(v.value))
        //显示数据不符合要求的警告
        if (regArr[i].test(v.value)) {
            stopArr[i].style.display = "none"
        } else {
            stopArr[i].style.display = "block"
            //一旦遇到不符合要求, 就改变flag的状态
            flag = false;
        }
    })
    // 当四条信息全部符合要求的情况下, 在控制台打印"传输数据给后台"
    console.log(flag)
    if (flag) {
        console.log("可以传送所有数据给后台");
    }
}



// // 给获取验证码添加倒计时
let btns = document.querySelector('.code button')
console.log(btns)
// 制作一个5秒的倒计时

// btns.forEach(function (v, i) {
    let timer ;
    btns.onclick = function () {
        clearInterval(timer) 
        btns.disabled=true;
        let n = 5;
        timer = setInterval(function () {
            btns.innerHTML=`倒计时${n}秒`
            // 倒计时到0时停止
            if (n === 0) {
                clearInterval(timer);
                btns.disabled=false;
                btns.innerHTML=`获取验证码`
            }
            n--;
        }, 1000);
    }
